<!--
    Exception 条件筛选组件
    @Author: zouwf
    @Date: 2019-12-09
-->
<template>
    <layout-Template class="v-screen-card">
        <!--申请时间-->
        <div class="v-screen-card__box first-padding">
            <span class="dg-words-normal">申请时间：</span>
            <dg-tag
                @click="handleClickApplyTime(index)"
                :is-border="false"
                :is-select="applyTagIndex == index"
                :select-style="{
                    'background-color': 'rgba(24, 144, 255, 0.08)',
                    color: '#1890ff',
                    border: 'solid 1px rgba(24, 144, 255, 0.6)'
                }"
                :key="tag"
                v-for="(tag, index) in applyTag"
            >
                {{ tag }}
            </dg-tag>
            <div class="v-screen-card__date">
                <span class="dg-words-normal">自定义：</span>
                <dg-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    class="dg-words-normal"
                    style="display: inline-block"
                >
                </dg-date-picker>
            </div>
        </div>
        <!--背审状态-->
        <div v-if="controlToggle" class="v-screen-card__box">
            <span class="dg-words-normal">背审状态：</span>
            <dg-tag
                @click="handleClickBackStatus(index)"
                :is-border="false"
                :is-select="backStatusIndex == index"
                :select-style="{
                    'background-color': 'rgba(24, 144, 255, 0.08)',
                    color: '#1890ff',
                    border: 'solid 1px rgba(24, 144, 255, 0.6)'
                }"
                :key="tag"
                v-for="(tag, index) in backStatusTag"
            >
                {{ tag }}
            </dg-tag>
        </div>
        <!--背审结果-->
        <div v-if="controlToggle" class="v-screen-card__box">
            <span class="dg-words-normal">背审结果：</span>
            <dg-tag
                @click="handleClickBackResults(index)"
                :is-border="false"
                :is-select="backResultsIndex == index"
                :select-style="{
                    'background-color': 'rgba(24, 144, 255, 0.08)',
                    color: '#1890ff',
                    border: 'solid 1px rgba(24, 144, 255, 0.6)'
                }"
                :key="tag"
                v-for="(tag, index) in backResultsTag"
            >
                {{ tag }}
            </dg-tag>
        </div>
        <!--区域-->
        <div v-if="controlToggle" class="v-screen-card__box">
            <span class="dg-words-normal">区域：</span>
            <dg-tag
                @click="handleClickRegion(index)"
                :is-border="false"
                :is-select="regionIndex == index"
                :select-style="{
                    'background-color': 'rgba(24, 144, 255, 0.08)',
                    color: '#1890ff',
                    border: 'solid 1px rgba(24, 144, 255, 0.6)'
                }"
                :key="tag"
                v-for="(tag, index) in regionTag"
            >
                {{ tag }}
            </dg-tag>
        </div>
        <!--查询关键字-->
        <div class="v-screen-card__box">
            <span class="dg-words-normal">查询关键字：</span>
            <el-input style="width: 274px;" placeholder="请输入内容" suffix-icon="el-icon-search" v-model="queryText">
            </el-input>
            <div style="float: right">
                <dg-button class="v-screen-card__button" type="primary"  ghost>重置</dg-button>
                <dg-button class="v-screen-card__button" @click="handleToggle" type="primary"  ghost>
                    {{controlToggle == true ? '收起' : '展开' }}
                    <i :class="{ 'el-icon-caret-top': controlToggle, 'el-icon-caret-bottom': controlToggle == false }"></i>
                </dg-button>
            </div>
        </div>
    </layout-Template>
</template>

<script>
import layoutTemplate from "@/components/layout-template/index";
export default {
    name: "index",
    props:{
        control:{
            type:Boolean
        }
    },
    data() {
        return {
            value1: "",
            //申请标签
            applyTag: ["不限", "近一天", "近三天", "近一周", "近一个月"],
            //申请标签标识
            applyTagIndex: 1,
            //背审状态标签
            backStatusTag: ["不限", "待审批", "已审批-所有", "已审批-同意", "已审批-拒绝", "未发布", "已发布"],
            //背审状态标识
            backStatusIndex: 1,
            //背审结果标签
            backResultsTag: ["不限", "未通过", "已通过"],
            //背审结果标签
            backResultsIndex: 1,
            //区域标签
            regionTag: ["不限", "境内", "境外"],
            //区域索引
            regionIndex: 1,
            //查询关键字
            queryText: "",
            //控制内容现在隐藏
            controlToggle:true
        };
    },
    methods: {
        /**
         *
         * 点击申请时间标签
         *
         * */
        handleClickApplyTime(index) {
            this.applyTagIndex = index;
        },
        /**
         *
         * 点击背审状态标签
         *
         * */
        handleClickBackStatus(index) {
            this.backStatusIndex = index;
        },
        /**
         *
         * 点击背审结果标签
         *
         * */
        handleClickBackResults(index) {
            this.backResultsIndex = index;
        },
        /**
         *
         * 点击区域标签
         *
         * */
        handleClickRegion(index) {
            this.regionIndex = index;
        },
        /**
         *
         * 展开、收起
         *
         * */
        handleToggle(){
            this.controlToggle === false ?
                this.controlToggle = true:
                this.controlToggle = false
        }
    },
    created(){
        if(this.control == true){
            this.controlToggle = false
        }
    },
    components: {
        layoutTemplate
    }
};
</script>

<style lang="scss" scoped>

</style>
